<template>
    <div class="project-management-container">
     <!-- 项目卡片区域 -->
             <!-- 项目卡片区域 -->
        <el-row :gutter="20" class="card-container">
            <el-col 
                :xs="24" :sm="12" :md="8" :lg="6" :xl="6" 
                v-for="(item, index) in tableData" 
                :key="index" 
                style="margin-bottom: 20px;"
            >
                <el-card :body-style="{ padding: '0px' }" shadow="hover">
                    <img src="@/assets/工业工厂-3.png" class="image">
                    <div style="padding: 14px;">
                        <div class="project-title">{{ item.name }}</div>
                        <div class="bottom clearfix">
                            <div class="project-info">
                                <div><i class="el-icon-location"></i> {{ item.address }}</div>
                                <div><i class="el-icon-user"></i> {{ item.manager }}</div>
                                <div>
                                    <i class="el-icon-date"></i> 
                                    {{ item.startDate }} ~ {{ item.endDate }}
                                </div>
                            </div>
                            <div class="card-footer">
                                <el-tag 
                                    :type="item.status === '1' ? 'success' : item.status === '0' ? 'info' : 'warning'"
                                    size="small"
                                    style="margin-right: 10px;"
                                >
                                    {{ item.status === "1" ? "进行中" : item.status === "0" ? "已完成" : "已暂停" }}
                                </el-tag>
                                <el-button 
                                    type="text" 
                                    class="button"
                                    @click="handleCardEdit(item)"
                                >
                                    编辑
                                </el-button>
                                <el-button 
                                    type="text" 
                                    class="button"
                                    @click="handleCardDelete(item)"
                                >
                                    查看
                                </el-button>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            
            <!-- 新增项目卡片 -->
            <el-col 
                :xs="24" :sm="12" :md="8" :lg="6" :xl="6"
               
            >
                <el-card 
                    :body-style="{ padding: '0px', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }" 
                    shadow="hover"
                    class="add-card"
                    @click="handleAdd"
                >
                    <div style="text-align: center; padding: 20px;">
                        <i class="el-icon-plus" style="font-size: 40px; color: #909399; margin-bottom: 10px;"></i>
                        <div style="font-size: 16px; color: #606266;">新增项目</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- 数据表格 -->
        <vxe-table border show-overflow :data="tableData" height="600" class="compact-table">
            <vxe-column type="seq" title="序号" width="60" align="center" />
            <vxe-column field="name" title="项目名称" />
            <vxe-column field="address" title="项目地址" />
            <vxe-column field="manager" title="项目负责人" />
            <vxe-column field="status" title="项目状态" width="120" align="center">
                <template #default="{ row }">
                    <el-tag :type="row.status === '1' ? 'success' : row.status === '0' ? 'info' : 'warning'"
                        size="small">
                        {{ row.status === "1" ? "进行中" : row.status === "0" ? "已完成" : "已暂停" }}
                    </el-tag>
                </template>
            </vxe-column>
            <vxe-column field="startDate" title="开始时间" width="160" />
            <vxe-column field="endDate" title="结束时间" width="160" />
            <vxe-column title="操作" width="140" fixed="right" align="center">
                <template #default="{ row }">
                    <el-button size="small" @click="handleEdit(row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
                </template>
            </vxe-column>
        </vxe-table>

        <!-- 编辑抽屉 -->
        <el-drawer v-model="drawerVisible" :title="isEdit ? '编辑项目' : '新增项目'" size="40%" destroy-on-close>
            <div class="compact-drawer">
                <!-- 项目信息表单 -->
                <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px" label-position="top"
                    class="compact-form">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="项目名称" prop="name">
                                <el-input v-model="formData.name" placeholder="请输入项目名称" size="small" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="项目地址" prop="address">
                                <el-input v-model="formData.address" placeholder="请输入项目地址" size="small" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="项目负责人" prop="manager">
                                <el-input v-model="formData.manager" placeholder="请输入负责人" size="small" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="项目状态" prop="status">
                                <el-select v-model="formData.status" placeholder="请选择状态" size="small"
                                    style="width: 100%">
                                    <el-option label="进行中" value="1" />
                                    <el-option label="已完成" value="0" />
                                    <el-option label="已暂停" value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="开始时间" prop="startDate">
                                <el-date-picker v-model="formData.startDate" type="date" placeholder="请选择开始时间"
                                    size="small" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结束时间" prop="endDate">
                                <el-date-picker v-model="formData.endDate" type="date" placeholder="请选择结束时间"
                                    size="small" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="备注">
                        <el-input v-model="formData.remark" type="textarea" :rows="2" placeholder="请输入备注信息"
                            size="small" />
                    </el-form-item>
                </el-form>

                <div class="drawer-footer">
                    <el-button size="small" @click="drawerVisible = false">取消</el-button>
                    <el-button type="primary" size="small" @click="handleSubmit">保存</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchForm: {
                name: '',
                status: ''
            },
            formData: {
                name: '',
                address: '',
                manager: '',
                status: '',
                startDate: '',
                endDate: '',
                remark: ''
            },
            formRules: {
                name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
                address: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
                manager: [{ required: true, message: '请输入项目负责人', trigger: 'blur' }],
                status: [{ required: true, message: '请选择项目状态', trigger: 'change' }],
            },
            tableData: [
                {
                    "name": "太化",
                    "address": "山西省太原市",
                    "manager": "张雷",
                    "status": "1",
                    "startDate": "2024-04-01",
                    "endDate": "2025-04-01",
                    "remark": "涉及煤炭开采与化肥生产"
                },
                {
                    "name": "中天",
                    "address": "江苏省南京市",
                    "manager": "王鹏",
                    "status": "0",
                    "startDate": "2023-07-15",
                    "endDate": "2024-07-15",
                    "remark": "集中在建筑钢材生产与供应"
                },
                {
                    "name": "淮钢",
                    "address": "江苏省淮安市",
                    "manager": "李雪",
                    "status": "1",
                    "startDate": "2024-01-10",
                    "endDate": "2025-01-10",
                    "remark": "专注于钢铁冶炼与深加工"
                },
                {
                    "name": "镔鑫",
                    "address": "河北省唐山市",
                    "manager": "王浩",
                    "status": "2",
                    "startDate": "2023-10-05",
                    "endDate": "2024-10-05",
                    "remark": "生产高端钢材，应用于机械制造"
                },
                {
                    "name": "东特",
                    "address": "辽宁省大连市",
                    "manager": "赵磊",
                    "status": "1",
                    "startDate": "2024-03-01",
                    "endDate": "2025-03-01",
                    "remark": "主要生产钢铁型材及配件"
                },
                {
                    "name": "三宝",
                    "address": "陕西省西安市",
                    "manager": "陈静",
                    "status": "0",
                    "startDate": "2023-05-20",
                    "endDate": "2024-05-20",
                    "remark": "专注于钢结构工程的建设与安装"
                },
                {
                    "name": "酒钢",
                    "address": "甘肃省酒泉市",
                    "manager": "孙强",
                    "status": "2",
                    "startDate": "2024-02-01",
                    "endDate": "2025-02-01",
                    "remark": "致力于钢铁冶炼及矿石开采"
                },
                {
                    "name": "淮钢2期",
                    "address": "江苏省淮安市",
                    "manager": "杨华",
                    "status": "1",
                    "startDate": "2024-06-01",
                    "endDate": "2025-06-01",
                    "remark": "第二期扩建项目，增加生产线"
                }
            ],
            drawerVisible: false,
            isEdit: false,
            selectedButtons: [],
            menuTree: [],
            treeProps: {},
            buttonList: []
        };
    },
    methods: {
        handleSearch() {
            // 查询逻辑
        },
        handleAdd() {
            this.isEdit = false;
            this.drawerVisible = true;
            this.formData = {
                name: '',
                address: '',
                manager: '',
                status: '',
                startDate: '',
                endDate: '',
                remark: ''
            };
        },
        handleEdit(row) {
            this.isEdit = true;
            this.drawerVisible = true;
            this.formData = { ...row };
        },
        handleDelete(row) {
            // 删除逻辑
        },
        handleSubmit() {
            if (this.isEdit) {
                // 更新逻辑
            } else {
                // 新增逻辑
            }
            this.drawerVisible = false;
        }
    }
};
</script>

<style scoped>
.project-management-container {
    padding: 20px;
}

.compact-form {
    margin-bottom: 20px;
}

.compact-table {
    margin-top: 20px;
}

.compact-drawer {
    padding: 20px;
}

.drawer-footer {
    text-align: right;
}
/* 卡片容器样式 */
.card-container {
    margin-bottom: 30px;
}

.project-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.project-info {
    font-size: 13px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 10px;
}

.project-info i {
    margin-right: 5px;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/* 新增卡片样式 */
.add-card:hover {
    background-color: #f5f7fa;
    border-color: #c0c4cc;
}

.add-card .el-icon-plus {
    transition: all 0.3s;
}

.add-card:hover .el-icon-plus {
    transform: scale(1.2);
    color: #409EFF;
}

/* 图片样式 */
.image {
    width: 100%;
    height: 100%; /* 降低图片高度 */
    object-fit: cover;
    display: block;
}

/* 保持原有样式不变 */
.project-management-container {
    padding: 20px;
}

.compact-form {
    margin-bottom: 20px;
}

.compact-table {
    margin-top: 20px;
}

.compact-drawer {
    padding: 20px;
}

.drawer-footer {
    text-align: right;
}
</style>
